<template>
  <div class="header">
    <div class="top">
      <img src="../assets/logo-header.png" alt="">
      <div class="search">
        <a-input-search placeholder="搜索课程" size="large" @search="onSearch">
          <a-button slot="enterButton" style="background-color: #00cf8c ;color: #FFFFFF">
            <a-icon type="search"/>
            搜索
          </a-button>
        </a-input-search>
      </div>
      <slot></slot>
    </div>
    <div class="list">
      <ul>
        <li>首页</li>
        <li>
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              课程分类
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-for="(item,index) in list" :key="index">
                <a href="#">{{ item.subjectTitle }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </li>
        <li>专属课程</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {courseList} from "@/api/api";

export default {
  name: "Header",
  data() {
    return {
      list: [],
    }
  },
  methods: {
    onSearch(value) {
      (value);
    },
  },
  created() {
    courseList(1).then(res => {
      // (res)
      this.list = res.rows
    })
  },
};

</script>

<style scoped lang="less">
.header {
  width: 1200px;
  margin: auto;

  .top {
    overflow: hidden;
    height: 106px;

    img {
      float: left;
      height: 55px;
      margin-top: 22px;
      margin-right: 200px;
    }

    .search {
      float: left;
      width: 400px;
      margin: 30px 6px 0 0;

      /deep/ .ant-input.ant-input-lg {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
      }

      /deep/ .ant-btn.ant-btn-lg.ant-input-search-button {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
    }

    .login {
      height: 100%;
      float: right;
      margin-right: 100px;
      font-size: 14px;
      padding: 32px 0 0;
    }

  }

  .list {
    zoom: 1;

    ul {
      overflow: hidden;

      li {
        float: left;
        margin: 0 30px 0 0;
        font-size: 16px;
      }
    }
  }
}



</style>